<template>
    <div class="typeSquare clear">
        <div class="text-center">
            <h3 class="bold">适合各个领域</h3>
            <p>支付的介绍</p>
        </div>
        <div class="col-xs-12 col-sm-6 typeSquare-item">
            <img src="../../assets/images/typeSquare/t1.jpg" title="互联网支付" alt="互联网支付"/>
        </div>
        <div class="col-xs-12 col-sm-6 typeSquare-item">
            <img src="../../assets/images/typeSquare/t2.jpg" title="互联网支付" alt="互联网支付"/>
        </div>
        <div class="col-xs-12 col-sm-6 typeSquare-item">
            <img src="../../assets/images/typeSquare/t3.jpg" title="互联网支付" alt="互联网支付"/>
        </div>
        <div class="col-xs-12 col-sm-6 typeSquare-item">
            <img src="../../assets/images/typeSquare/t4.jpg" title="互联网支付" alt="互联网支付"/>
        </div>
    </div>
</template>
<script>
    export default {
        ready(){
            this.reSize();
            $(window).resize(this.reSize);
        },
        methods: {
            reSize(){
                let $obj = $('.typeSquare'), radio = 540 / 320,width;
                $obj.find('.typeSquare-item').each(function () {
                    if(!width){
                        width = $(this).width() / radio;
                    }
                    $(this).height(width);
                });
            }
        },
        data(){
            return {

            }
        }
    }
</script>